<template>
  <div class="conspon">
    <!-- 顶部 -->
    <van-nav-bar class="titles">
      <i
        slot="left"
        class="iconfont iconzuojiantou"
        @click="$router.go(-1)"
      ></i>
      <p slot="title" class="title">详情</p>
      <i slot="right" class="iconfont iconlianjie"></i>
    </van-nav-bar>
    <div class="main">
        <div class="shop">        
                    <van-card>
                        <h3 slot="title" class="shop-title">白色恋人</h3>
                        <div slot="desc" class="shop-desc"> 
                            <div class="price">
                                <div class="xinyun">
                                    <van-rate v-model="value"  void-color="#cbcbcb" color="#515356"/>
                                    <span>1128</span> 
                                </div>
                                <p>￥62.0</p>  
                            </div>                                            
                            <div class="image">
                                    <van-image                             
                                    :src="require('@/assets/白色恋人 copy.png')" 
                                    class="qiaokel"                                    
                                    />
                            </div>
                            <p class="shop-info">
                                白色恋人（しろいこいびと），是北海道札幌市的石屋制果株式会社出产的一种巧克力夹心薄饼。它由两片薄饼（法语：langue
                            </p>
                            <!-- 已选部分 -->
                            <van-cell class="yixuan">
                                <p slot="title" class="yixuan-text">已选：2 盒</p>
                                <i slot="right-icon" class="iconfont iconiconfonti"></i>
                            </van-cell>
                            <!-- 按钮部分 -->
                            <div class="btns">
                                <van-button type="primary" class="btns-a1">
                                    <i slot="default" class="iconfont iconLikeIcon"></i>
                                </van-button>
                                <van-button type="info" class="btns-a2">相似对比</van-button>
                                <van-button type="default" class="btns-a3" @click="$router.push('/tuijian')">购买</van-button>
                            </div>
                        </div>
                        <!-- 商品价格 -->                   
                    </van-card>
            </div>
            </div>
    </div>
</template>
<script>
export default {
    data:function(){
        return {
            value:3
        }
    }
}
</script>
<style lang="less">
// 顶部
.conspon {
  .conspon .van-cell::after{
    border: none;
  }
    .van-hairline--bottom::after{
        border: none;
    }
  .titles {
    .iconzuojiantou {
      font-size: 40px;
      color: #535353;
      padding-left: 20px;
    }
    .title {
      font-size: 32px;
      color: #484747;
    }
    .iconlianjie {
      font-size: 40px;
      color: #535353;
      padding-right: 20px;
    }
  }
  .main{
      padding: 0px 62px;
      .van-card{    
          padding: 0px;
          background: #ffffff;
      }
      .shop{
          text-align: left;
          .shop-title{
            font-size: 40px;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 0px;
            color: #484747;
            margin-bottom: 31px;
          }
        //  价格部分
          .shop-desc{
              .price{
                  display: flex;
                  flex-direction: row;
                  justify-content: space-between;
                  align-items: center;
                  .xinyun{
                    //   评分部分
                    display: flex;
                    flex-direction: row;
                    justify-items: center;
                    align-items: center;
                    .van-rate__icon{
                        margin-top: 2px;
                        font-size: 22px;
                    }
                      span{
                          height: 22px;
                          font-size: 22px;
                            font-weight: normal;
                            font-stretch: normal;
                            letter-spacing: 0px;
                            color: #5d5d5d;
                         margin-left: 15px;     
                         margin-top: 3px;                
                      }                      
                  }
                //   单价部分
                  p{
                          font-size: 22px;
                            font-weight: normal;
                            font-stretch: normal;
                            letter-spacing: 0px;
                            color: #4da1dd;
                            margin-right: 8px;
                    }
              }
            //   商品介绍
              .shop-info{
                  font-size: 22px;
                font-weight: normal;
                font-stretch: normal;
                letter-spacing: 0px;
                color: #6c6c6c;
              }
            //   图片部分
            .image{
                margin: 0px 0px 33px;
                .qiaokel{
                 width: 388px;
                 height: 402px;
                 display: block;
                 margin: 0 auto;
                }
            }
            // 已选部分
            .yixuan{   
                width: 626px;
                height: 88px;
                background-color: #f7f7f7;
                margin: 39px 0px 30px;          
                .yixuan-text{
                    font-size: 24px;
                    font-weight: normal;
                    font-stretch: normal;
                    letter-spacing: 0px;
                    color: #999999;
                }
                .iconiconfonti{
                    font-size: 40px;
                    color: #b5b5b5;
                }
            }
            //   按钮部分
            .btns{
                display: flex;
                flex-direction: row;
                justify-items: center;
                align-items: center;
                button{
                    padding: 0px;
                    border: none;
                }
                .btns-a1{
                    width: 130px;               
                    height: 88px;
                    background-color: #f0f7fe;
                    .iconLikeIcon{
                        font-size: 38px;
                        color: #7e7e7e;
                    }             
                }
                .btns-a2{
                    width: 260px;           
                    height: 88px;
                    background-color: #f0f7fe;
                    margin: 0px 40px 0px 10px;                 
                    font-size: 24px;
                    font-weight: normal;
                    font-stretch: normal;
                    letter-spacing: 0px;
                    color: #4c4c4c;
                }
                 .btns-a3{
                    width: 186px;                 
                    height: 88px;
                    background-color: #4a90e2;
                    font-size: 24px;
                    font-weight: normal;
                    font-stretch: normal;
                    line-height: 12px;
                    letter-spacing: 0px;
                    color: #ffffff;
                }
            }
          }
      }
  }
}
</style>
